<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Neon lights</title>
    <style>
        .filter {
            top: 50%;
            left: 50%;
            position: fixed;
            width: max(75vw, 75vh);
            aspect-ratio: 1;
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
            user-select: none !important;
            pointer-events: none;
            border-radius: 50%;
            transform: translate(-50%, -50%) scaleY(-1);
            z-index: 100;
            --_m1: radial-gradient(rgb(255 255 255 / 1) 0%,
                    rgb(255 255 255 / 0.5) 40%,
                    rgb(255 255 255 / 0) 65%,
                    rgb(255 255 255 / 0) 100%);
            --_m: radial-gradient(rgb(0 0 0 / 0.9) 0%,
                    rgb(0 0 0 / 0.5) 40%,
                    rgb(0 0 0 / 0) 65%,
                    rgb(0 0 0 / 0) 100%);
            -webkit-mask-box-image: var(--_m1);
            mask-border: var(--_m1);
            mix-blend-mode: overlay;
            -webkit-backdrop-filter: brightness(4) url(#filter);
            backdrop-filter: brightness(4) url(#filter);
        }

        .card {
            --border-radius: 2rem;
            width: 100%;
            aspect-ratio: 1;
            position: relative;
            z-index: unset;
            background-color: black;
            border-radius: var(--border-radius);
            -webkit-backdrop-filter: blur(1rem);
            backdrop-filter: blur(1rem);
        }

        .card:after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: var(--border-radius);
            z-index: -1;
            background-image: linear-gradient(122.12deg, #166496 0%, #961664 100%);
            --b: 0.5;
            filter: brightness(var(--b));
            transition: all calc(1s / 16 * 4) ease-in-out;
            --border: 4;
            --alpha: 0;
            --gradient: linear-gradient(122.12deg, #166496 0%, #961664 100%);
            --bg-size: calc(100% + (2px * var(--border)));
            background: var(--gradient) center center/var(--bg-size) var(--bg-size);
            border: calc(var(--border) * 1px) solid transparent;
            -webkit-mask: linear-gradient(hsl(0 0% 100%/var(--alpha)), hsl(0 0% 100%/var(--alpha))), linear-gradient(white, white);
            mask: linear-gradient(hsl(0 0% 100%/var(--alpha)), hsl(0 0% 100%/var(--alpha))), linear-gradient(white, white);
            -webkit-mask-clip: padding-box, border-box;
            mask-clip: padding-box, border-box;
            -webkit-mask-composite: source-in, xor;
            mask-composite: intersect;
        }

        .card:hover:after {
            --b: 1;
            isolation: isolate;
        }

        body {
            min-height: 100vh;
            display: grid;
            place-items: center;
            background-color: #161620;
            color: white;
            margin: 0;
            isolation: isolate;
            gap: 1rem;
            padding: 1rem;
            grid-template-columns: repeat(auto-fit, minmax(25vw, 1fr));
            background-color: #161620;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 160 80'%3E%3Cg fill='%23202024' %3E%3Cpolygon points='0 10 0 0 10 0'/%3E%3Cpolygon points='0 40 0 30 10 30'/%3E%3Cpolygon points='0 30 0 20 10 20'/%3E%3Cpolygon points='0 70 0 60 10 60'/%3E%3Cpolygon points='0 80 0 70 10 70'/%3E%3Cpolygon points='50 80 50 70 60 70'/%3E%3Cpolygon points='10 20 10 10 20 10'/%3E%3Cpolygon points='10 40 10 30 20 30'/%3E%3Cpolygon points='20 10 20 0 30 0'/%3E%3Cpolygon points='10 10 10 0 20 0'/%3E%3Cpolygon points='30 20 30 10 40 10'/%3E%3Cpolygon points='20 20 20 40 40 20'/%3E%3Cpolygon points='40 10 40 0 50 0'/%3E%3Cpolygon points='40 20 40 10 50 10'/%3E%3Cpolygon points='40 40 40 30 50 30'/%3E%3Cpolygon points='30 40 30 30 40 30'/%3E%3Cpolygon points='40 60 40 50 50 50'/%3E%3Cpolygon points='50 30 50 20 60 20'/%3E%3Cpolygon points='40 60 40 80 60 60'/%3E%3Cpolygon points='50 40 50 60 70 40'/%3E%3Cpolygon points='60 0 60 20 80 0'/%3E%3Cpolygon points='70 30 70 20 80 20'/%3E%3Cpolygon points='70 40 70 30 80 30'/%3E%3Cpolygon points='60 60 60 80 80 60'/%3E%3Cpolygon points='80 10 80 0 90 0'/%3E%3Cpolygon points='70 40 70 60 90 40'/%3E%3Cpolygon points='80 60 80 50 90 50'/%3E%3Cpolygon points='60 30 60 20 70 20'/%3E%3Cpolygon points='80 70 80 80 90 80 100 70'/%3E%3Cpolygon points='80 10 80 40 110 10'/%3E%3Cpolygon points='110 40 110 30 120 30'/%3E%3Cpolygon points='90 40 90 70 120 40'/%3E%3Cpolygon points='10 50 10 80 40 50'/%3E%3Cpolygon points='110 60 110 50 120 50'/%3E%3Cpolygon points='100 60 100 80 120 60'/%3E%3Cpolygon points='110 0 110 20 130 0'/%3E%3Cpolygon points='120 30 120 20 130 20'/%3E%3Cpolygon points='130 10 130 0 140 0'/%3E%3Cpolygon points='130 30 130 20 140 20'/%3E%3Cpolygon points='120 40 120 30 130 30'/%3E%3Cpolygon points='130 50 130 40 140 40'/%3E%3Cpolygon points='120 50 120 70 140 50'/%3E%3Cpolygon points='110 70 110 80 130 80 140 70'/%3E%3Cpolygon points='140 10 140 0 150 0'/%3E%3Cpolygon points='140 20 140 10 150 10'/%3E%3Cpolygon points='140 40 140 30 150 30'/%3E%3Cpolygon points='140 50 140 40 150 40'/%3E%3Cpolygon points='140 70 140 60 150 60'/%3E%3Cpolygon points='150 20 150 40 160 30 160 20'/%3E%3Cpolygon points='150 60 150 50 160 50'/%3E%3Cpolygon points='140 70 140 80 150 80 160 70'/%3E%3C/g%3E%3C/svg%3E");
        }

        * {
            box-sizing: border-box;
        }
    </style>
</head>

<body translate="no">
    <div id="movableDiv" class="filter"></div>

    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>

    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <svg style="width: 0; height: 0; position: fixed;">
        <filter id="filter">
            <feGaussianBlur stdDeviation="10" in="SourceGraphic" edgeMode="none" result="blur" />
            <feComposite in="blur" in2="SourceGraphic" operator="over" result="composite" />
        </filter>
    </svg>

    <script id="rendered-js">
        "use strict";
        const div = document.getElementById("movableDiv");
        document.addEventListener("pointermove", moveDiv);
        function moveDiv(event) {
            div.style.left = event.clientX + "px";
            div.style.top = event.clientY + "px";
        }
    </script>
</body>

</html>